<template>
  <div class="Login">
    <div class="DiFangZhiListHeader">
      <div class="DiFangZhiListTop">
        <div>
          <img src="../assets/Img/1.png" alt>
        </div>
        <div class="Font_size">返回首页</div>
      </div>
    </div>
    <div class="Index">
      <div class="DiFangZhiHeader">当前位置：首页 > 注册</div>
      <div class="IndexMoode">
        <div class="IndexMoodeHeadder">用户注册</div>
        <div class="LoginIndex">
          <div>账号</div>
          <input type="text" class="Input">
        </div>
        <div class="LoginIndex">
          <div>密码</div>
          <input type="text" class="Input">
        </div>
        <div class="LoginIndex tanxingbuju">
          <div>验证码</div>
          <div class="Yanzhen">
            <input type="text" class="InputYanZhen">
            <div>获取验证码</div>
          </div>
        </div>
        <div class="borderr">
          <div></div>
          <div>
            我已阅读过用户的协议
            <span class="SpanColor">用户协议</span>
          </div>
        </div>
        <div class="BTN">立即注册</div>
      </div>
    </div>
    <Foot></Foot>
  </div>
</template>
<script>
  import Foot from "../components/Foot";
export default {
  name: "home",

  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    Foot: Foot
  }
};
</script>
<style lang="less" scoped>
.DiFangZhiListHeader {
  color: rgba(255, 255, 255, 1);
  height: 180px;
  background: url("../assets/Img/10.jpg");
  background-size: 100% 100%;
  background-position: center 0;
  background-size: cover;
}
.DiFangZhiListTop {
  display: flex;
  justify-content: space-between;
  padding-top: 55px;
  width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.Font_size {
  font-size: 16px;
}
.Index {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
}
.DiFangZhiHeader {
  padding: 30px 0;
  width: 173px;
  text-align: center;
  font-size: 15px;
  padding-bottom: 23px;
}
.IndexMoode {
  width: 1200px;
  background: #eef2f3;
  padding-bottom: 50px;
}
.IndexMoodeHeadder {
  padding: 30px 0 15px 0;
  font-size: 32px;
}

.LoginIndex {
  font-size: 15px;
  width: 250px;

  margin: 0 auto;
}
.LoginIndex > div {
  margin: 15px 0;
  text-align: left;
}
.Input {
  box-sizing: border-box;
  width: 250px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(215, 215, 215, 1);
}
.InputYanZhen {
  width: 125px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(215, 215, 215, 1);
}
.Yanzhen {
  display: flex;
  width: 250px;
  justify-content: space-between;
}
.tanxingbuju {
}
.Yanzhen > div {
  text-align: center;
  background: rgb(113, 172, 226);
  font-size: 15px;
  box-sizing: border-box;
  padding: 0 5px;
  line-height: 30px;
  color: #fff;
}
.borderr {
  display: flex;
  width: 250px;
  margin: 0 auto;
  font-size: 15px;
}
.borderr > div:nth-child(1) {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ffffff;
}
.SpanColor {
  color: rgb(0, 122, 204);
}
.BTN {
  height: 30px;
  width: 250px;
  margin: 0 auto;
  background: rgb(29, 53, 93);
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  margin-top: 50px;
}
</style>
